<template>
  <div class="todo-header">
    <!-- 这里书写v-model可不可以? -->
    <!--  -->
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keydown.enter="handler"/>
  </div>
</template>

<script>
//当前子组件可不可以有属于自己的响应式数据
export default {
  name: "",
  data() {
    return {
      title: "",
    };
  },
  //接受父组件传递过来的数据
  // props: ["addTodo"],
  methods: {
     //键盘事件且按回车
     handler(){
       //调用父亲的方法，给父组件传递数据，让父组件添加一个新的事件！
       //调用父亲的方法的需不需要传递参数？
       //整理一个事件(对象):todo
       //准备一个新增的事件
       //组件实例Header对象解构出相应的属性值
       const {title} = this;
       //如果是空的字符串|带有空格不添加
       if(title.trim()=='') return;
       //准备新增的事件，其中title属于ES6写法，KV、一致省略V
       const todo = {id:Date.now(),title,done:false};
       //因为Header绑定了自定义事件addTodo，当用户出发键盘按下的时候，触发自定义事件addTodo
       //自定义事件的类型   自定义事件回调注入的参数
       this.$emit('erha',todo);
       //清空title
       this.title = '';
     }
  },
};
</script>

<style scoped>
</style>
